<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="城市对比分析"
      :selectOptions="selectOptions"
    />
    <el-table
      :data="tableData"
      class="table"
      height="50vh"
      border
      @row-click="handleRowClick"
      style="width: 100%">
      <el-table-column
        class="column-point"
        v-for="(item,index) in tableColumnList" :key="index"
        :prop="item.prop"
        :label="item.label" >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import VTable from "@/components/VTable/index";
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { yearOptions } from '@/utils/global.js';
  import {alarmList} from "@/api/alarm/statistics";
  import {overviewCityContrastAnalysis} from "@/api/risk/cityWaringResult"
  export default {
    name: "cityCompareAnalysis",
    components: {
      VTable,
      formTitleVue,
    },
    props:{
      yearOptions:{},
      oneTargetOptionsMap:{}
    },
    data() {
      return {
        tableData: [],
        tableColumnList: [
          {prop:"areaName", label:"城区名称"},
          {prop:"youXiu", label:"优秀"},
          {prop:"liangHao", label:"良好"},
          {prop:"yiBan", label:"一般"},
          {prop:"yuJing", label:"预警"},
          {prop:"rate", label:"优秀/良好占比"},
        ],
        selectOptions: [
          {
            key:"year",
            selectValue: "",
            options:[],
            changeFn: this.selectChange1,
          },
          {
            key:"oneTarget",
            selectValue: "",
            options: [],
            changeFn: this.selectChange2,
          },
        ],
        searChForm: {
          year:"",
          oneTargetName:""
        },
        oneTargetOptions:[]
      }
    },
    watch:{
      'yearOptions':{
        handler(newVal, oldVal) {
          this.selectOptions.forEach(t=> {
            if (t.key == 'year') {
              t.options = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'oneTargetOptions':{
        handler(newVal, oldVal) {
          this.selectOptions.forEach(t=> {
            if (t.key == 'oneTarget') {
              t.options = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'oneTargetOptionsMap':{
        handler(newVal, oldVal) {
          let year = this.selectOptions[0].options[0].value
          let temp = newVal[year].map(t=> t)
          temp.unshift({id:"全部", label:"全部", value:""})
          this.oneTargetOptions = temp;
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleRowClick(row, column, event){
        // console.log('handleRowClick===',row, column, event)
        let cityCode = row.areaCode
        this.$router.push({
                    // name: 'cityDetailDetail',
                    path:'/public/cityAnalysis/cityDetailDetail',
                    query: {
                        cityCode: cityCode,
                        year:this.searChForm.year,
                        checkType:''
              },
        })
      },
      selectChange1(item){
        this.searChForm.year = item
        let temp =this.oneTargetOptionsMap[item].map(t=> t)
        temp.unshift({id:"全部", label:"全部", value:""})
        this.oneTargetOptions = temp;
        console.log("selectChange1====>",this.oneTargetOptions)
        this.searChForm.oneTargetName=''
        this.selectOptions[1].selectValue = ''
        this.search()
      },
      selectChange2(item){
        this.searChForm.oneTargetName = item
        this.search()
      },
      search() {
        this.fetch({
          ...this.searChForm,
        })
      },
      fetch(params = {}) {
        overviewCityContrastAnalysis(params).then(res => {
          if (res.code == 200) {
            this.tableData=res.data
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
        })
      },
      init(){
        this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
        this.searChForm.year = this.selectOptions[0].options[0].value
        this.searChForm.oneTargetName = ""
        this.search()
      },
    },
    mounted() {
      this.init()
    },
  }
</script>

<style  lang="scss" scoped>
  ::v-deep .el-table__row{
    cursor: pointer;
  }
</style>
